<template>
  <div class="contentView" v-loading="formLoading" :style="`height:${contentHeight}px`">
    <div class="btnWrap routeHeader">
      <div>
        <el-button @click="close">关闭</el-button>
      </div>
    </div>
    <el-scrollbar :style="`height:${contentHeight - 120}px`">
      <el-scrollbar :style="`height:${contentHeight - 60}px`">
      <el-table v-loading="loading" :data="list" border>
        <el-table-column type="index" width="55" label="序号" align="left" />
        <!-- 列定义 -->
        <el-table-column label="订单号" align="left" width="180" :class="'custom-header'">
          <template #default="scope">
            
            {{scope.row.orderNumber}}
          </template>
        </el-table-column>
        <el-table-column label="订单类型" align="left" width="180">
          <template #default="scope">
            <dict-tag :type="DICT_TYPE.MARKET_ORDER_TYPE" :value="scope.row.dictOrderType" />
          </template>
        </el-table-column>
        <el-table-column label="业务类型" align="left" width="180">
          <template #default="scope">
            <dict-tag :type="DICT_TYPE.BUSINESS_TYPE" :value="scope.row.dictBusinessType" />
          </template>
        </el-table-column>
        <el-table-column label="销售类型" align="left" width="180">
          <template #default="scope">
            <dict-tag :type="DICT_TYPE.SALE_TYPE" :value="scope.row.dictSaleType" />
          </template>
        </el-table-column>
        <el-table-column label="客户简称" align="left" width="180">
          <template #default="scope">
            {{ scope.row.customerName }}
          </template>
        </el-table-column>
        <el-table-column label="客户代码" align="left" width="180">
          <template #default="scope">
            {{ scope.row.customerCode }}
          </template>
        </el-table-column>
        <el-table-column label="销售部门" align="left" width="180">
          <template #default="scope">
            {{ scope.row.salesDepartment }}
          </template>
        </el-table-column>
        <el-table-column label="合同日期" align="left" width="180">
          <template #default="scope">
            {{ scope.row.contractDate }}
          </template>
        </el-table-column>
        <el-table-column label="订单日期" align="left" width="180">
          <template #default="scope">
            {{ scope.row.orderDate }}
          </template>
        </el-table-column>
        <el-table-column label="业务员" align="left" width="180">
          <template #default="scope">
            {{ scope.row.salesperson }}
          </template>
        </el-table-column>
        <el-table-column label="税率" align="left" width="180">
          <template #default="scope">
            {{ scope.row.taxRate }}
          </template>
        </el-table-column>
        <el-table-column label="汇率" align="left" width="180">
          <template #default="scope">
            {{ scope.row.exchangeRate }}
          </template>
        </el-table-column>
        <el-table-column label="付款条件" align="left" width="180">
          <template #default="scope">
            {{ scope.row.paymentConditions }}
          </template>
        </el-table-column>
        <el-table-column label="商务合同" align="left" width="180">
          <template #default="scope">
            <span style="cursor: pointer" @click="downFile(scope.row.filePath)">
              {{ scope.row.fileName }}</span
            >
          </template>
        </el-table-column>
        <el-table-column label="备注" align="left" width="180">
          <template #default="scope">
            {{ scope.row.remark }}
          </template>
        </el-table-column>
        <el-table-column label="创建人" align="left" width="180">
          <template #default="scope">
            {{ scope.row.creatorName }}
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="left" width="180">
          <template #default="scope">
            {{ timestampToDateTime(scope.row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column label="变更人" align="left" width="180">
          <template #default="scope">
            {{ scope.row.orderChangePerson }}
          </template>
        </el-table-column>
        <el-table-column label="变更时间" align="left" width="180">
          <template #default="scope">
            {{ scope.row.orderChangeDate }}
          </template>
        </el-table-column>
      </el-table>
      <div class="btnWraps">
        
      </div>
      <el-table v-loading="loading" :data="listPro" border style="margin-top: 10px">
        <el-table-column type="index" width="55" label="序号" align="left" />
        <!-- 列定义 -->
        <el-table-column align="left" width="180" :class="'custom-header'">
          <template #header>
            <span>产品编号</span>
          </template>
          <template #default="scope">
            {{scope.row.productNumber}}
          </template>
        </el-table-column>
        <el-table-column label="产品名称" align="left" width="180">
          <template #default="scope">
            <span>{{ scope.row.productName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="产品规格" align="left" width="180">
          <template #default="scope">
            {{ scope.row.productStandard }}
          </template>
        </el-table-column>
        <el-table-column align="left" width="180">
          <template #header>
            <span>单位</span>
          </template>
          <template #default="scope">
            <span>{{ scope.row.partUnit }}</span>
          </template>
        </el-table-column>
        <el-table-column label="订单数量" align="left" width="180">
          <template #header>
            <span>订单数量</span>
          </template>
          <template #default="scope">
            {{scope.row.orderQuantity}}
            
          </template>
        </el-table-column>
        <el-table-column label="发货日期" align="left" width="180">
          <template #header>
            <span>发货日期</span>
          </template>
          <template #default="scope">
            {{scope.row.deliveryDate}}
          </template>
        </el-table-column>
        <el-table-column label="" align="left" width="180">
          <template #header>
            <span>交货项目类型</span>
          </template>
          <template #default="scope">
            <dict-tag :type="DICT_TYPE.DELIVERY_PROJECT_TYPE" :value="scope.row.dictDeliveryProjectType" />
          </template>
        </el-table-column>
        <el-table-column label="" align="right" width="180">
          <template #header>
            <span>报价</span>
          </template>
          <template #default="scope">
            {{scope.row.quotation}}
            
          </template>
        </el-table-column>
        <el-table-column label="" align="right" width="180">
          <template #header>
            <span>含税单价</span>
          </template>
          <template #default="scope">
            {{scope.row.priceTaxTotal}}
            
          </template>
        </el-table-column>
        <el-table-column align="right" width="180">
          <template #header>
            <span>价税合计</span>
          </template>
          <template #default="scope">
            {{scope.row.taxIncludedPrice}}
          </template>
        </el-table-column>
        <el-table-column align="left" width="180">
          <template #header>
            <span>税率</span>
          </template>
          <template #default="scope">
            {{scope.row.taxRate}}
            
          </template>
        </el-table-column>
        <el-table-column label="状态" align="left" width="180">
          <template #default="scope">
            <dict-tag :type="DICT_TYPE.MARKET_ORDER_STATUS" :value="scope.row.dictStatus" />
          </template>
        </el-table-column>
        <el-table-column label="备注" align="left" width="180">
          <template #default="scope">
            {{scope.row.remark}}
          </template>
        </el-table-column>
        
      </el-table>
    </el-scrollbar>
  </el-scrollbar>
  </div>
</template>

<script lang="ts" setup>
  import { useRoute } from 'vue-router'
  import { DICT_TYPE } from '@/utils/dict'
  import * as productRelationApi from '@/api/orderManagement/productRelation'
  import { useTagsViewStore } from '@/store/modules/tagsView'
  const tagsViewStore = useTagsViewStore()
  const routes = useRouter() // 路由
  const route = useRoute()
  const { push } = useRouter()
  const loading = ref(true)
  const formLoading = ref(false)
  let list = ref<any>([])
  let listPro = ref<any>([])
  //时间转换
  const timestampToDateTime = (timestamp) => {
    if (timestamp) {
      const date = new Date(timestamp)
      const year = date.getFullYear()
      const month = ('0' + (date.getMonth() + 1)).slice(-2)
      const day = ('0' + date.getDate()).slice(-2)
      const hours = ('0' + date.getHours()).slice(-2)
      const minutes = ('0' + date.getMinutes()).slice(-2)
      const seconds = ('0' + date.getSeconds()).slice(-2)
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
    } else {
      return ''
    }
  }
 
  
  /**关闭 */
  const close = () => {
    tagsViewStore.delView(routes.currentRoute.value)
    push('/orderManagement/orderManagement/marketing/productionInfo')
  }
  //获取产品信息
  const getDetail = async (orderNumber) => {
    const data = await productRelationApi.getDetailProductRelation(orderNumber)
    list.value[0] = data
    listPro.value = data.products
    loading.value = false
  }
  
  const contentHeight = ref(0)
  const refreshData = async () => {
    formLoading.value = true
    contentHeight.value = document.body.clientHeight - 127
    formLoading.value = false
  }
  // 初始化
  onMounted(async () => {
    refreshData()
    getDetail(route.query.orderNumber)
  })
</script>
<style lang="scss" scoped>
.contentView {
    padding: 10px;
    background: #fff;
  }
  .tableView {
    :deep(.el-input__wrapper) {
      box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
      cursor: default;
      .el-input__inner {
        cursor: default !important;
        text-align: center;
      }
    }
  }
  .btnWrap {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  .el-table .custom-header::before {
    content: '*';
    color: red;
    margin-right: 4px; /* 根据需要调整小红星与字段的位置 */
  }
</style>
